可能会|都会_使用React和Next.js构建博客

篇首语：本文由编程笔记#小编为大家整理，主要介绍了使用 React 和 Next.js 构建博客相关的知识，希望对你有一定的参考价值。

Next.js 是由 Vercel 创建和维护的基于 React 的应用程序框架。本教程将从零开始学习如何使用 Next.js 构建一个小型的博客网站：

• 基本页面创建


• 从 Markdown 文件生成的动态路由


• 静态生成（在构建时渲染）


• 服务器端渲染（在请求时渲染）

文章涉及的代码仓库地址：https://github.com/QuintionTang/react-blog

Next.js 适合博客吗？

本教程将通过创建一个简单的博客来展示 Next.js 功能，那么 Next.js 适合这样的博客的开发吗？先来了解一下一般博客都需要什么？

• WordPress 是一个内容管理系统 (CMS)，它为三分之一的网站提供支持，通过在每次请求时将可编辑的数据库内容渲染到 php 模板中来为页面提供服务。它非常适合定期更新的内容，但性能、安全性和数据备份需要一定的自定义设置。

  
  


• 静态站点生成器 (SSG)，例如 Eleventy 或 Gatsby 创建预渲染文件，无需服务器端或数据库即可快速构建静态站点，在版本控制、性能和安全性都非常出色，但构建步骤和以开发人员为中心的过程可能会减慢发布速度，尤其是在大型网站上。

Next.js 是一个基于 React 的应用程序框架，它几乎没有特定于博客功能。但是，它可以提供了一种实现机制：

1. 在可能的情况下，Next.js 生成静态内容，如 SSG，这些页面加载速度非常快，可以被搜索引擎快速收录，并且可以在任何有或没有 Javascript 的设备上阅读。


2. 在第一次加载后，Next.js 应用程序的行为类似于单页应用程序 (SPA)，后续页面和代码会以渐进式下载，无需刷新整页。


3. Next.js 为每个请求提供服务器端渲染 (SSR)，为个人用户提供实时 CMS 更新或自定义内容变得更加容易。

如果网站可能会从基本博客迭代为更复杂的网站，例如在线商店、新闻聚合服务、社交媒体平台等，可以考虑使用 Next.js。

开始

本教程正在构建的内容，可以在 GitHub 上找到完整的代码。可以通过在终端中输入以下命令，在 Windows、macOS 或 Linux 上下载、安装和启动它：

git clone git@github.com:QuintionTang/react-blog.git
cd react-blog
npm i
npm run dev

然后在浏览器中输入 localhost:3000 打开主页。

从头开始构建

Next.js 提供了一个 create-next-app 工具来快速开始使用应用程序模板。本教程将展示如何从头开始构建站点：如添加静态资源或者页面。

安装 Next.js 和 React

与其他 Node.js 或者 VUE 项目一样，首先创建一个目录并初始化 package.json 文件：

mkdir react-blog
cd react-blog
npm init

然后安装 Next.js 和 React 作为依赖项：

npm install next react react-dom --save

添加开发构建脚本设置，如下所示，在 package.json 文件的 scripts 属性中添加：

"scripts":
"dev": "next dev",
"build": "next build",
"start": "next start"


创建第一个页面

Next.js 有一个基于文件系统的路由器。在项目的 pages 目录中创建的任何 React 组件文件都会自动呈现为一个页面。

要创建一个页面，需要在 pages 目录中添加一个 index.js 文件。将以下代码添加到 ./pages/index.js 文件中，返回 JSX 代码的功能性 React 组件：

export default function Home()
return (
<>
Next.js 博客网站



这个博客网站将使用 Next.js。


要启动 Next.js 开发服务器，从项目根目录在终端中运行 npm run dev（可以使用 npx next dev），然后在浏览器中打开 http://localhost:3000/：

Next.js 已经确定页面可以预渲染，所以它在开发模式下显示一个闪电图标。

可以在自动路由的页面目录中创建类似的文件，如下：

• pages/index.js 用于呈现博客主要


• pages/about.js 呈现一个 /about 页面

增加链接

在 JSX 代码中使用标准 html 标签创建指向另一个页面的超链接。如果该页面位于同一个 Next.js 站点内，浏览器将会刷新整个页面。可以使用 next/link 中的 组件实现页面跳转。在根页面 /index.js 上创建指向 /about 页面的链接，代码如下：

import Link from "next/link";
export default function Home()
return (
<>
Next.js 博客网站



这个博客网站将使用 Next.js。


当点击 关于我们... 链接时，Next.js 将使用 Ajax 请求下载 /about 的内容一次并缓存，然后再页面中呈现。

增加 元素

可以使用 next/head 中的 组件来更改页面标题和元标记，如下：

import Head from "next/head";
import Link from "next/link";
export default function Home()
return (
<>


name="description"
cOntent="这是一个由 Next.js 驱动的网站"
/>

Next.js 博客网站



这个博客网站将使用 Next.js。


点击浏览器查看源代码，可以看到相关 HTML 标签。

增加静态资源

public 目录用于存放静态资源，如图标、robots.txt 或其它更新频率低的文件。可以增加自己的文件或从初始项目存储库复制 favicon.ico 和图像子目录。

创建模板

Next.js 使用 React 组件来实现模板化，接下来项目根目录下创建一个新的 components 文件夹，然后添加 layout.js 来定义一个新的 组件：

import Header from "./header";
import Footer from "./footer";
export default function Layout( children, title )
return (
<>